<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>举报推荐 - 社交平台</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary: #3b82f6;
            --primary-light: #eff6ff;
            --danger: #ef4444;
            --danger-light: #fee2e2;
            --dark: #1e293b;
            --light: #f8fafc;
            --gray: #94a3b8;
            --border: #e2e8f0;
            --shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
            --shadow-hover: 0 10px 15px rgba(0, 0, 0, 0.1);
        }
        
        body {
            font-family: 'Inter', system-ui, sans-serif;
            background-color: var(--light);
            color: var(--dark);
        }
        
        .navbar {
            box-shadow: var(--shadow);
        }
        
        .section-title {
            margin-bottom: 1.5rem;
            padding-bottom: 0.75rem;
            border-bottom: 1px solid var(--border);
        }
        
        .report-card {
            border: none;
            border-radius: 0.75rem;
            box-shadow: var(--shadow);
            transition: all 0.3s ease;
            overflow: hidden;
        }
        
        .report-card:hover {
            box-shadow: var(--shadow-hover);
            transform: translateY(-2px);
        }
        
        .report-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1rem;
        }
        
        .report-author {
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }
        
        .author-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .author-info {
            line-height: 1.2;
        }
        
        .author-name {
            font-weight: 600;
            font-size: 0.95rem;
        }
        
        .report-time {
            font-size: 0.8rem;
            color: var(--gray);
        }
        
        .report-type {
            font-size: 0.75rem;
            padding: 0.25rem 0.75rem;
            border-radius: 999px;
            background-color: var(--danger-light);
            color: var(--danger);
            font-weight: 500;
        }
        
        .report-content {
            margin-bottom: 1rem;
            line-height: 1.6;
        }
        
        .report-images {
            display: flex;
            gap: 0.5rem;
            margin-bottom: 1rem;
            border-radius: 0.5rem;
            overflow: hidden;
        }
        
        .report-images.single-image img {
            width: 100%;
            max-height: 300px;
            object-fit: cover;
        }
        
        .report-images.multi-images {
            flex-wrap: wrap;
        }
        
        .report-images.multi-images img {
            flex: 1;
            min-width: 100px;
            aspect-ratio: 1/1;
            object-fit: cover;
        }
        
        .report-stats {
            display: flex;
            gap: 1.5rem;
            padding-top: 0.75rem;
            border-top: 1px solid var(--border);
            font-size: 0.85rem;
            color: var(--gray);
        }
        
        .stat-item {
            display: flex;
            align-items: center;
            gap: 0.35rem;
            cursor: pointer;
            transition: color 0.2s;
        }
        
        .stat-item:hover {
            color: var(--primary);
        }
        
        .stat-item.liked {
            color: var(--danger);
        }
        
        .stat-item.saved {
            color: var(--primary);
        }
        
        .grid-layout {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 1.5rem;
        }
        
        .list-layout .report-card {
            display: flex;
            margin-bottom: 1.5rem;
        }
        
        .list-layout .report-images {
            flex: 0 0 200px;
            margin-bottom: 0;
            margin-right: 1rem;
        }
        
        .list-layout .report-body {
            flex: 1;
        }
        
        .featured-layout {
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 1.5rem;
        }
        
        .featured-report {
            grid-column: 1 / -1;
        }
        
        .featured-report .report-images img {
            max-height: 400px;
        }
        
        .layout-controls {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1.5rem;
        }
        
        .view-options {
            display: flex;
            gap: 0.5rem;
        }
        
        .view-btn {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid var(--border);
            background-color: white;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .view-btn.active {
            background-color: var(--primary);
            color: white;
            border-color: var(--primary);
        }
        
        .filter-dropdown .btn {
            background-color: white;
            color: var(--dark);
            border: 1px solid var(--border);
        }
        
        @media (max-width: 768px) {
            .list-layout .report-card {
                flex-direction: column;
            }
            
            .list-layout .report-images {
                flex: none;
                margin-right: 0;
                margin-bottom: 1rem;
            }
            
            .featured-layout {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-light bg-white">
        <div class="container">
            <a class="navbar-brand" href="#">
                <i class="fas fa-shield-alt text-primary me-2"></i>社交平台
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="#">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="#">举报中心</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">安全指南</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">帮助中心</a>
                    </li>
                </ul>
                <div class="d-flex align-items-center gap-3">
                    <div class="search-box d-none d-lg-block">
                        <div class="input-group">
                            <input type="text" class="form-control form-control-sm" placeholder="搜索举报内容...">
                            <button class="btn btn-sm btn-outline-secondary" type="button">
                                <i class="fas fa-search"></i>
                            </button>
                        </div>
                    </div>
                    <button class="btn btn-sm btn-primary">
                        <i class="fas fa-plus me-1"></i> 发起举报
                    </button>
                    <img src="https://picsum.photos/100/100?random=200" alt="用户头像" class="rounded-circle" style="width:36px;height:36px;">
                </div>
            </div>
        </div>
    </nav>
    
    <!-- 主要内容 -->
    <div class="container py-5">
        <h1 class="section-title">举报推荐</h1>
        
        <!-- 布局控制和筛选 -->
        <div class="layout-controls">
            <div class="view-options">
                <div class="view-btn active" id="gridView" title="网格布局">
                    <i class="fas fa-th"></i>
                </div>
                <div class="view-btn" id="listView" title="列表布局">
                    <i class="fas fa-list"></i>
                </div>
                <div class="view-btn" id="featuredView" title="精选布局">
                    <i class="fas fa-star"></i>
                </div>
            </div>
            
            <div class="filter-dropdown">
                <div class="btn-group">
                    <button type="button" class="btn btn-sm dropdown-toggle" data-bs-toggle="dropdown">
                        按最新排序
                    </button>
                    <ul class="dropdown-menu dropdown-menu-end">
                        <li><a class="dropdown-item" href="#">按最新排序</a></li>
                        <li><a class="dropdown-item" href="#">按热度排序</a></li>
                        <li><a class="dropdown-item" href="#">按评论数排序</a></li>
                        <li><a class="dropdown-item" href="#">按举报类型</a></li>
                    </ul>
                </div>
            </div>
        </div>
        
        <!-- 举报内容展示区 -->
        <div class="reports-container grid-layout">
            <!-- 无图片举报 -->
            <div class="report-card bg-white p-4">
                <div class="report-header">
                    <div class="report-author">
                        <img src="https://picsum.photos/100/100?random=1" alt="用户头像" class="author-avatar">
                        <div class="author-info">
                            <div class="author-name">张明</div>
                            <div class="report-time">2小时前</div>
                        </div>
                    </div>
                    <span class="report-type">垃圾信息</span>
                </div>
                
                <div class="report-content">
                    <p>发现有用户在多个帖子下发布相同的广告内容，包含可疑链接，疑似垃圾信息推广。该用户账号创建时间较短，专门发布此类内容，严重影响社区体验。</p>
                </div>
                
                <div class="report-stats">
                    <div class="stat-item like-btn">
                        <i class="far fa-thumbs-up"></i>
                        <span>32</span>
                    </div>
                    <div class="stat-item comment-btn">
                        <i class="far fa-comment"></i>
                        <span>8</span>
                    </div>
                    <div class="stat-item save-btn">
                        <i class="far fa-bookmark"></i>
                        <span>15</span>
                    </div>
                    <div class="stat-item view-count">
                        <i class="far fa-eye"></i>
                        <span>247</span>
                    </div>
                </div>
            </div>
            
            <!-- 单张图片举报 -->
            <div class="report-card bg-white p-4">
                <div class="report-header">
                    <div class="report-author">
                        <img src="https://picsum.photos/100/100?random=2" alt="用户头像" class="author-avatar">
                        <div class="author-info">
                            <div class="author-name">李华</div>
                            <div class="report-time">5小时前</div>
                        </div>
                    </div>
                    <span class="report-type">不当内容</span>
                </div>
                
                <div class="report-content">
                    <p>该用户发布的图片包含不当内容，可能引起不适。图片中含有未经处理的暴力元素，不符合社区规范，建议进行审核处理。</p>
                </div>
                
                <div class="report-images single-image">
                    <img src="https://picsum.photos/600/400?random=10" alt="举报内容图片">
                </div>
                
                <div class="report-stats">
                    <div class="stat-item like-btn liked">
                        <i class="fas fa-thumbs-up"></i>
                        <span>78</span>
                    </div>
                    <div class="stat-item comment-btn">
                        <i class="far fa-comment"></i>
                        <span>23</span>
                    </div>
                    <div class="stat-item save-btn">
                        <i class="far fa-bookmark"></i>
                        <span>42</span>
                    </div>
                    <div class="stat-item view-count">
                        <i class="far fa-eye"></i>
                        <span>563</span>
                    </div>
                </div>
            </div>
            
            <!-- 多张图片举报 -->
            <div class="report-card bg-white p-4">
                <div class="report-header">
                    <div class="report-author">
                        <img src="https://picsum.photos/100/100?random=3" alt="用户头像" class="author-avatar">
                        <div class="author-info">
                            <div class="author-name">王芳</div>
                            <div class="report-time">昨天 14:30</div>
                        </div>
                    </div>
                    <span class="report-type">抄袭内容</span>
                </div>
                
                <div class="report-content">
                    <p>发现该用户发布的内容完全抄袭自其他平台作者，对比截图如下。原图发布时间早于该用户发布时间，且内容完全一致，涉嫌侵权。</p>
                </div>
                
                <div class="report-images multi-images">
                    <img src="https://picsum.photos/300/300?random=21" alt="抄袭对比图1">
                    <img src="https://picsum.photos/300/300?random=22" alt="抄袭对比图2">
                    <img src="https://picsum.photos/300/300?random=23" alt="抄袭对比图3">
                </div>
                
                <div class="report-stats">
                    <div class="stat-item like-btn">
                        <i class="far fa-thumbs-up"></i>
                        <span>124</span>
                    </div>
                    <div class="stat-item comment-btn">
                        <i class="far fa-comment"></i>
                        <span>56</span>
                    </div>
                    <div class="stat-item save-btn saved">
                        <i class="fas fa-bookmark"></i>
                        <span>89</span>
                    </div>
                    <div class="stat-item view-count">
                        <i class="far fa-eye"></i>
                        <span>1256</span>
                    </div>
                </div>
            </div>
            
            <!-- 无图片举报 -->
            <div class="report-card bg-white p-4">
                <div class="report-header">
                    <div class="report-author">
                        <img src="https://picsum.photos/100/100?random=4" alt="用户头像" class="author-avatar">
                        <div class="author-info">
                            <div class="author-name">赵伟</div>
                            <div class="report-time">昨天 09:15</div>
                        </div>
                    </div>
                    <span class="report-type">骚扰行为</span>
                </div>
                
                <div class="report-content">
                    <p>该用户多次发送骚扰信息，言语低俗，已多次警告但仍持续骚扰。已保留所有聊天记录作为证据，希望平台能采取封号处理，维护社区环境。</p>
                </div>
                
                <div class="report-stats">
                    <div class="stat-item like-btn">
                        <i class="far fa-thumbs-up"></i>
                        <span>87</span>
                    </div>
                    <div class="stat-item comment-btn">
                        <i class="far fa-comment"></i>
                        <span>34</span>
                    </div>
                    <div class="stat-item save-btn">
                        <i class="far fa-bookmark"></i>
                        <span>29</span>
                    </div>
                    <div class="stat-item view-count">
                        <i class="far fa-eye"></i>
                        <span>782</span>
                    </div>
                </div>
            </div>
            
            <!-- 单张图片举报 -->
            <div class="report-card bg-white p-4">
                <div class="report-header">
                    <div class="report-author">
                        <img src="https://picsum.photos/100/100?random=5" alt="用户头像" class="author-avatar">
                        <div class="author-info">
                            <div class="author-name">刘强</div>
                            <div class="report-time">2天前</div>
                        </div>
                    </div>
                    <span class="report-type">虚假信息</span>
                </div>
                
                <div class="report-content">
                    <p>该用户发布的产品宣传图片与实际严重不符，夸大产品效果，误导消费者。已购买该产品并确认存在欺诈行为，特此举报。</p>
                </div>
                
                <div class="report-images single-image">
                    <img src="https://picsum.photos/600/400?random=11" alt="虚假宣传图片">
                </div>
                
                <div class="report-stats">
                    <div class="stat-item like-btn">
                        <i class="far fa-thumbs-up"></i>
                        <span>215</span>
                    </div>
                    <div class="stat-item comment-btn">
                        <i class="far fa-comment"></i>
                        <span>89</span>
                    </div>
                    <div class="stat-item save-btn">
                        <i class="far fa-bookmark"></i>
                        <span>103</span>
                    </div>
                    <div class="stat-item view-count">
                        <i class="far fa-eye"></i>
                        <span>2347</span>
                    </div>
                </div>
            </div>
            
            <!-- 多张图片举报 -->
            <div class="report-card bg-white p-4">
                <div class="report-header">
                    <div class="report-author">
                        <img src="https://picsum.photos/100/100?random=6" alt="用户头像" class="author-avatar">
                        <div class="author-info">
                            <div class="author-name">陈静</div>
                            <div class="report-time">3天前</div>
                        </div>
                    </div>
                    <span class="report-type">账号盗用</span>
                </div>
                
                <div class="report-content">
                    <p>该账号盗用我的个人信息和照片，冒充本人与他人交流，已造成不良影响。以下是我的身份证明和被盗用的内容对比，请求立即封禁该账号。</p>
                </div>
                
                <div class="report-images multi-images">
                    <img src="https://picsum.photos/300/300?random=24" alt="身份证明">
                    <img src="https://picsum.photos/300/300?random=25" alt="被盗用内容1">
                    <img src="https://picsum.photos/300/300?random=26" alt="被盗用内容2">
                    <img src="https://picsum.photos/300/300?random=27" alt="被盗用内容3">
                </div>
                
                <div class="report-stats">
                    <div class="stat-item like-btn liked">
                        <i class="fas fa-thumbs-up"></i>
                        <span>342</span>
                    </div>
                    <div class="stat-item comment-btn">
                        <i class="far fa-comment"></i>
                        <span>128</span>
                    </div>
                    <div class="stat-item save-btn">
                        <i class="far fa-bookmark"></i>
                        <span>176</span>
                    </div>
                    <div class="stat-item view-count">
                        <i class="far fa-eye"></i>
                        <span>3876</span>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 分页 -->
        <nav class="mt-5" aria-label="Page navigation">
            <ul class="pagination justify-content-center">
                <li class="page-item disabled">
                    <a class="page-link" href="#" tabindex="-1">上一页</a>
                </li>
                <li class="page-item active"><a class="page-link" href="#">1</a></li>
                <li class="page-item"><a class="page-link" href="#">2</a></li>
                <li class="page-item"><a class="page-link" href="#">3</a></li>
                <li class="page-item">
                    <a class="page-link" href="#">下一页</a>
                </li>
            </ul>
        </nav>
    </div>
    
    <!-- 页脚 -->
    <footer class="bg-dark text-white py-5 mt-5">
        <div class="container">
            <div class="row">
                <div class="col-md-4 mb-4">
                    <h5 class="mb-3">社交平台</h5>
                    <p class="text-muted">打造安全、健康、友好的网络社区环境</p>
                </div>
                <div class="col-md-4 mb-4">
                    <h5 class="mb-3">举报中心</h5>
                    <ul class="list-unstyled">
                        <li><a href="#" class="text-muted">举报指南</a></li>
                        <li><a href="#" class="text-muted">处理流程</a></li>
                        <li><a href="#" class="text-muted">社区规范</a></li>
                        <li><a href="#" class="text-muted">常见问题</a></li>
                    </ul>
                </div>
                <div class="col-md-4">
                    <h5 class="mb-3">联系我们</h5>
                    <div class="d-flex gap-3">
                        <a href="#" class="text-muted"><i class="fab fa-weibo fa-lg"></i></a>
                        <a href="#" class="text-muted"><i class="fab fa-wechat fa-lg"></i></a>
                        <a href="#" class="text-muted"><i class="fas fa-envelope fa-lg"></i></a>
                    </div>
                </div>
            </div>
            <div class="text-center text-muted mt-5">
                &copy; 2023 社交平台 版权所有
            </div>
        </div>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 布局切换功能
            const container = document.querySelector('.reports-container');
            const gridBtn = document.getElementById('gridView');
            const listBtn = document.getElementById('listView');
            const featuredBtn = document.getElementById('featuredView');
            
            gridBtn.addEventListener('click', function() {
                container.className = 'reports-container grid-layout';
                setActiveButton(gridBtn);
            });
            
            listBtn.addEventListener('click', function() {
                container.className = 'reports-container list-layout';
                setActiveButton(listBtn);
            });
            
            featuredBtn.addEventListener('click', function() {
                container.className = 'reports-container featured-layout';
                // 标记第一个为精选
                const firstCard = container.querySelector('.report-card');
                firstCard.classList.add('featured-report');
                setActiveButton(featuredBtn);
            });
            
            function setActiveButton(btn) {
                document.querySelectorAll('.view-btn').forEach(b => {
                    b.classList.remove('active');
                });
                btn.classList.add('active');
            }
            
            // 点赞功能
            const likeButtons = document.querySelectorAll('.like-btn');
            likeButtons.forEach(btn => {
                btn.addEventListener('click', function() {
                    const icon = this.querySelector('i');
                    const countSpan = this.querySelector('span');
                    let count = parseInt(countSpan.textContent);
                    
                    if (icon.classList.contains('far')) {
                        // 点赞
                        icon.classList.remove('far');
                        icon.classList.add('fas');
                        this.classList.add('liked');
                        countSpan.textContent = count + 1;
                    } else {
                        // 取消点赞
                        icon.classList.remove('fas');
                        icon.classList.add('far');
                        this.classList.remove('liked');
                        countSpan.textContent = count - 1;
                    }
                });
            });
            
            // 收藏功能
            const saveButtons = document.querySelectorAll('.save-btn');
            saveButtons.forEach(btn => {
                btn.addEventListener('click', function() {
                    const icon = this.querySelector('i');
                    const countSpan = this.querySelector('span');
                    let count = parseInt(countSpan.textContent);
                    
                    if (icon.classList.contains('far')) {
                        // 收藏
                        icon.classList.remove('far');
                        icon.classList.add('fas');
                        this.classList.add('saved');
                        countSpan.textContent = count + 1;
                    } else {
                        // 取消收藏
                        icon.classList.remove('fas');
                        icon.classList.add('far');
                        this.classList.remove('saved');
                        countSpan.textContent = count - 1;
                    }
                });
            });
            
            // 评论按钮点击效果
            const commentButtons = document.querySelectorAll('.comment-btn');
            commentButtons.forEach(btn => {
                btn.addEventListener('click', function() {
                    // 这里可以添加评论弹窗逻辑
                    alert('查看评论功能将在这里实现');
                });
            });
        });
    </script>
</body>
</html>
    
